<template>
  <div class="main">
    <h1>登录页</h1>
    <ul>
      <li>
        <input type="text" placeholder="请输入用户名" v-model="username" />
      </li>
      <li>
        <input type="text" placeholder="请输入密码" v-model="password" />
      </li>
      <li>
        <!-- 点击登录触发methods中的loginHandle方法 -->
        <button @click="loginHandle">登录</button>
      </li>
      <li>
        <router-link :to="{ name: 'reg' }">没有账号？立即注册</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
// 引入封装的登录方法
import { login } from '../services/user'
import { setToken } from '../utils/auth'
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async loginHandle() {
      // 对用户是否输入用户名及密码的判断处理
      if (this.username && this.password) {
        const res = await login({
          userName: this.username,
          password: this.password
        })
        // 如果用户名和密码都填写，后端返回了success表示登录成功
        // 则把返回的token存入本地，并跳转到首页
        if (res.code === 'success') {
          // 执行封装的方法将token存入localstroage
          setToken(res.token)
          this.$router.push({ name: 'Home' })
        } else {
          alert(res.message)
        }
        console.log(res)
      } else {
        alert('请输入用户名和密码')
      }
    }
  }
}
</script>

<style>
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main h1 {
  margin: 5rem 0 1rem;
}
ul li:nth-of-type(4) a {
  margin-left: 1rem;
}
button {
  margin-left: 1.8rem;
}
</style>
